{% extends "base.html" %}

{% block title %} Map {% endblock %}

{% block header %}
    {% if layers %}
        <script type="text/javascript">
            var layers = "{% for layer in layers %}{{layer}}{% if not forloop.last %},{% endif %}{% endfor %}";
        </script>
    {% endif %}
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ maps_api_key }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ static_url }}/js/skytruth.js"></script>
    <script type="text/javascript" src="{{ static_url }}/js/ewn.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ static_url }}/main.css" />

{% endblock %}

{% block content %}
    <div id="searchlink">
        <a href="/" style="text-decoration: none; color: black;"><img style="vertical-align: middle; padding: 3px;" src="{{ MEDIA_URL }}images/search-sm.png" />Search for new location</a>
    </div>
    <!--div id="addnewlink" onClick="theMap.toggleAddMode();">
        <img style="vertical-align: middle; padding: 3px;" src="{{ MEDIA_URL }}images/add-sm.png" />Add a new marker
    </div-->
    <div id="map" style="width: 90%; height: 500px; border: 1px solid black;"></div>
    <div style="display: none;" id="infoblock"></div>
	
    <script type="text/javascript">
    	var mapEl = document.getElementById("map");
        var theMap;
        var mc = new GLatLng({{ map_center }});
		var zm = {{ map_zoom }};
		theMap = new skytruth.ProtoMap(mapEl, mc, zm, '{{ q }}');
    </script>
{% endblock %}